
<!DOCTYPE>
<html>
<head>
<title>Q.dropdownlist | QLib | Powered By Q.js</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 使用QLib控件是必须包含样式表 -->
<link type="text/css" rel="stylesheet" href="../ui.css" />
<style>
#mycontainer {
  position:relative;
  width: 698px;
  height: 298px;
  background: blue;
  padding: 1px;
}

#box-container {
  position:relative;
  width: 698px;
  height: 298px;
  background: blue;
  padding: 1px;
}



/* start menu */
.q-contextmenu.os-start-menu {
  border-width: 0;
  box-shadow:0 1px 15px rgba(0,0,0,.2);
  -moz-box-shadow:0 1px 15px rgba(0,0,0,.2);
  -webkit-box-shadow:0 1px 15px rgba(0,0,0,.2);
  min-width: 200px;

  background-color: #FFF;
  background-image: none;
  background-repeat: repeat-y;
  background-position: left top;
  z-index: 910000;
}

.q-contextmenu.os-start-menu .q-item {
  height: 30px;
  line-height: 30px;
}

.q-contextmenu.os-start-menu .q-item.q-seperator,
.q-contextmenu.os-start-menu .q-item.q-seperator:hover
{
  height: 15px;
  background-color: none;
}


.q-contextmenu.os-start-menu .q-item .q-item-title {
  line-height: 30px;
  font-size: 15px;
}

.q-contextmenu.os-start-menu .q-item:hover, 
.q-contextmenu.os-start-menu .q-item.q-active 
{
  background-color: #;
}

</style>
<!--  
提示：src="{QLib目录}/Q.js" 
根据实际存放路径， 测试代码都是在QLib目录的samples文件夹下，所以这里用的是"../Q.js" 
-->
<script type="text/javascript" src="../Q.js"></script>
<script type="text/javascript" src="../utils/stl.js"></script>
<script type="text/javascript" src="../ui/contextmenu.js"></script>
<script type="text/javascript" src="../ui/dropdownlist.js"></script>
<script>
<!--

var g_box;

Q.ready(function() {

  g_box = new Q.DropDownList(
    {id: 'dropdownlist', 
    on_change: function(text,value) {
      Q.printf(text + ":::" + value);
    }
  });
  g_box.setValue('category');
  g_box2 = new Q.DropDownList({id: 'wayixia-view', wstyle: 'os-start-menu'});

});

-->
</script>
</head>
<body onselectstart="return false;" style="overflow:hidden;-moz-user-select:none;-webkit-user-select: none;">
<h3>Q.dropdownlist samples </h3>
<hr>
<br>
<br>
基于select生成
<hR>
<select id="dropdownlist" style="width: 300px; height: 30px;display: ;">
  <option value="author">作者</option>
  <option value="category">分类</option>
  <option value="color">色系</option>
  <option value="tag" selected>标签</option>
</select>

<select id="wayixia-view" style="width: 300px; height: 30px;display: ;">
  <option value="size_small">小图(100x100)</option>
  <option value="size_normal" selected>中图(200x100)</option>
  <option value="size_large">大图(500x300)</option>
</select>

<br/>
<br/>
<br/>
<br/>
<br/>
</body>
</html>




